<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

	
<title>悦章科技机构平台</title>	

	
<!--内容样式-->
<link rel="stylesheet" href="__PUBLIC__/Home/css/style.css" />


	
	
</head>

<body>

	
	<div class="main">
	
	
	<include file="menu" />
		
		
		
		<!--  右侧内容  -->
		<div class="content">
			
			
			<div class= "ct-title">
				<div class="ctt-bt">新增面授课</div>
				<div class="divclear"></div>
			</div>
			
			
			<div class="xzpt-box">
			
				<div class="xb-title">基本信息</div>
				<form action="" method="POST">
				<div class="xb-nr" style="width: 100%;">
					<div class="xbn-zd">课程封面：</div>
					<div class="xbn-r" style="width: 320px;height: 200px;padding: 0;">
						<div class="xbnr-img im">
							<img src="__PUBLIC__/Home/images/img_sctp.png" id="cc"/>
						</div>
<!-- 						<div class="xbnr-yc">
							<img src="__PUBLIC__/Home/images/icon_sc.png" />
						</div> -->
						<div style="position: absolute; white-space: nowrap; width: 100%; font-size: 12px; height: 16px; color: #999; text-align: justify; margin-left: 100px">
			                推荐尺寸：320px * 200px
			            </div>
					</div>
					
					<div class="divclear"></div>
				</div>
				
				<div class="divclear"></div>

				<div class="xb-nr">
					<div class="xbn-zd">课程名称：</div>
					<div class="xbn-r">
						<input type="text" placeholder="请输入课程名称" name="name">
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="xb-nr">
					<div class="xbn-zd">课程价格：</div>
					<div class="xbn-r">
						<input type="text" placeholder="请输入课程价格" name="price">
						<div class="xbnr-dw">元</div>
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="xb-nr">
					<div class="xbn-zd">报名截止：</div>
					<div class="xbn-r">
						<input type="date" name="end_enlist_time">
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="xb-nr">
					<div class="xbn-zd">一级分类：</div>
					<div class="xbn-r">
						<select class="yi" onchange="dem()" name="one_type_id">
							<option>请选择</option>
							<volist name="type_list" id="item">
								<option value="{$item['id']}">{$item['name']}</option>
							</volist>
						</select>
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="xb-nr">
					<div class="xbn-zd">二级分类：</div>
					<div class="xbn-r">
						<select class="er" name="two_type_id">
							<option>请选择</option>
						</select>
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="divclear"></div>
				<div class="tc">
					<div class="xb-nr" style="width: 100%;">
						<div class="xbn-zd">选择老师：</div>
						<div class="xbn-r" style="width: 300px;margin-right: 10px;">
							<select name="teach_id[]">
								<volist name="teach" id="item">
									<option value="{$item['id']}">{$item['username']} / {$item['mobile']}</option>
								</volist>
							</select>
						</div>
						<div class="xbn-ls">
							<img src="__PUBLIC__/Home/images/icon_tjls.png" id="tdd"/>
						</div>
					</div>
				</div>
<!-- 				<div class="xb-nr" style="width: 100%;">
					<div class="xbn-zd">选择老师：</div>
					<div class="xbn-r" style="width: 300px;margin-right: 10px;">
						<select>
							<option>王老师 / 15575991589</option>
						</select>
					</div>
					<div class="xbn-ls">
						<img src="__PUBLIC__/Home/images/icon_tjls.png" />
					</div>
				</div> -->
				<div class="divclear"></div>
				
				<div class="xb-nr" style="width: 100%;">
					<div class="xbn-zd">上课地址：</div>
					<div class="xbn-r" style="width: 132px;margin-right: 10px;">
						<select class="pr" name="province_id" onchange="province()">
							<volist name="province" id="item" >
								<option value="{$item['province_id']}">{$item['name']}</option>
							</volist>
						</select>
					</div>
					<div class="xbn-r" style="width: 132px;margin-right: 10px;">
						<select onchange="city()" class="ci" name="city_id">
							<volist name="city" id="item">
								<option value="{$item['city_id']}">{$item['name']}</option>
							</volist>
						</select>
					</div>
					<div class="xbn-r" style="width: 132px;margin-right: 10px;">
						<select class="ar" name="area_id">
							<volist name="area" id="item">
								<option value="{$item['area_id']}">{$item['name']}</option>
							</volist>
						</select>
					</div>
					<div class="xbn-r" style="width: 300px;">
						<input type="text" placeholder="请输入详细地址" name="address">
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="divclear"></div>
				
				<div class="xb-nr" style="width: 100%;">
					<div class="xbn-zd">学期时间：</div>
					<div class="xbn-r" style="width: 300px;" >
						<input type="date" name="start_date">
					</div>
					<div class="xbn-zhi">至</div>
					<div class="xbn-r" style="width: 300px;" >
						<input type="date" name="end_date">
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="divclear"></div>
				
				<div class="xb-nr" style="width: 100%;">
					<div class="xbn-zd">上课时间：</div>
					<div style="float: left;" class="kc">
						<div style="margin-bottom: 10px;">
							<div class="xbn-r" style="width: 132px;margin-right: 10px;">
								<select name="zhou[]">
									<option value="周一">周一</option><option value="周二">周二</option><option value="周三">周三</option><option value="周四">周四</option><option value="周五">周五</option><option value="周六">周六</option><option value="周日">周日</option>
								</select>
							</div>
							<div class="xbn-r" style="width: 300px;margin-right: 10px;">
								<input type="text" placeholder="请填写时间段，如“9:00-12:00”" name="sj[]">
							</div>
							<div class="xbn-ls">
								<img src="__PUBLIC__/Home/images/icon_tjls.png" id="add"/>
							</div>
							<div class="divclear"></div>
						</div>
<!-- 						<div style="margin-bottom: 10px;">
							<div class="xbn-r" style="width: 132px;margin-right: 10px;">
								<select>
									<option>周二</option>
								</select>
							</div>
							<div class="xbn-r" style="width: 300px;margin-right: 10px;">
								<input type="text" placeholder="请填写时间段，如“9:00-12:00”">
							</div>
							<div class="xbn-ls">
								<img src="__PUBLIC__/Home/images/icon_scsj.png" />
							</div>
							<div class="divclear"></div>
						</div> -->
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="divclear"></div>
				
				
				<div class="xb-title">详情介绍</div>
				
				<div class="xb-nr" style="width: 100%;">
					<div class="xbn-zd">课程详情：</div>
					<div class="xbn-r" style="width: calc(100% - 200px);padding: 0;">
							<textarea style=" margin-left:12px;" id="content" name="desc"></textarea>
							{:hook('documentEditFormContent',array('name'=>'desc'))}
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="divclear"></div>
				
				
				<div class="xb-title">目录说明</div>
				
				<div class="xb-nr" style="width: 100%;">
					<div class="xbn-zd">编辑目录：</div>
					<div style="float: left" class="catalog">
						<div class="pp">
							<ul style="margin-bottom: 20px;border-bottom: 1px dashed #ccc;padding-bottom: 10px;width: 800px;" id="uu">
								<li style="margin-bottom: 10px;">
									<div class="xbn-r" style="width: 300px;margin-right: 10px;">
										<input type="text" placeholder="请输入章节标题" name="head_word[]">
									</div>
									<div class="xbn-ls">
										<img src="__PUBLIC__/Home/images/icon_tjls.png" id="mdd"/>
									</div>
									<div class="divclear"></div>
								</li>
								<li style="margin-bottom: 10px;">
									<div class="xbn-r" style="width: 240px;margin-right: 10px;">
										<input type="text" placeholder="请输入子节标题" name="subsection_title[]">
									</div>
									<div class="xbn-ls" id="c_title">
										<img src="__PUBLIC__/Home/images/icon_tjls.png" />
									</div>
									<div class="divclear"></div>
								</li>
								<li style="margin-bottom: 10px;" >
									<div class="xbn-r" style="width: 240px;margin-right: 10px;">
										<input type="text" placeholder="请输入子节标题" name="subsection_title[]">
									</div>
									<div class="xbn-ls" id="c_t">
										<img src="__PUBLIC__/Home/images/icon_scsj.png" />
									</div>
									<div class="divclear"></div>
								</li>
							</ul>
						</div>
<!-- 						<ul style="margin-bottom: 20px;border-bottom: 1px dashed #ccc;padding-bottom: 10px;width: 800px;">
							<li style="margin-bottom: 10px;">
								<div class="xbn-r" style="width: 300px;margin-right: 10px;">
									<input type="text" placeholder="请输入章节标题">
								</div>
								<div class="xbn-ls">
									<img src="__PUBLIC__/Home/images/icon_scsj.png" />
								</div>
								<div class="divclear"></div>
							</li>
							<li style="margin-bottom: 10px;">
								<div class="xbn-r" style="width: 240px;margin-right: 10px;">
									<input type="text" placeholder="请输入子节标题">
								</div>
								<div class="xbn-ls">
									<img src="__PUBLIC__/Home/images/icon_tjls.png" />
								</div>
								<div class="divclear"></div>
							</li>
							<li style="margin-bottom: 10px;">
								<div class="xbn-r" style="width: 240px;margin-right: 10px;">
									<input type="text" placeholder="请输入子节标题">
								</div>
								<div class="xbn-ls">
									<img src="__PUBLIC__/Home/images/icon_scsj.png" />
								</div>
								<div class="divclear"></div>
							</li>
						</ul> -->
					</div>
					<div class="divclear"></div>
				</div>
				
				<div class="divclear"></div>
				<input name="li" type="hidden">
				<input name="img" type="hidden">
				<button class="xb-btn" type="submit">保存</button>
				
			</div>
			</form>
			
			
		</div>
		
		
		
	</div>
	
	
	
</body>
</html>
<script src="/Public/static/jquery-2.0.3.min.js"></script>
<script src="/Public/static/jquery-1.12.4.min.js"></script>
<script src="/Public/static/jquery.min.js"></script>
<script type="text/javascript">
$("body").on('click','#cc',function(){
    var thisObj = $(this);
    var inputFile = document.createElement("input");
    inputFile.type = "file";
    inputFile.name = "file[]";
    inputFile.multiple = "multiple";
    inputFile.accept = "image/jpeg,image/jpg,image/png";
    inputFile.click();
    $(inputFile).change(function(){
        var files = inputFile.files;
        for(var i=0;i<files.length;i++){
            uploadImg(files[i],thisObj);
        }
    });
});
function uploadImg(file,thisObj){
    var formData = new FormData();
    formData.append('image', file);
    $.ajax({
        url: "{:U('Operate/uploadImg')}",
        type: "post",
        data: formData,
        dataType:"json",
        contentType: false,
        processData: false,
        mimeType: "multipart/form-data",
        success: function (data) {
            if(data.code == 0){
            // 　　console.log(data.info.imgurl);
                var imgid=data.info.imgid;
            	$("input[name='img']").val(imgid);
            	var img=data.info.imgurl;
            	$('.im').html('<img src="'+img+'" id="cc" height="200" width="350"/>');

　　　　　　　}
        },
    });
}
function dem(){
	var pid=$('.yi option:selected').val();
    $.ajax({
        url: "{:U('Operate/two_type_list')}",
        type: "post",
        data: {type_id:pid},
        dataType:"json",
        success: function (data) {
                var hh='';
                $.each(data.data,function(k,v){
                 hh +='<option value='+v.id+'>'+v.name+'</option>';
                });
            	$('.er').html(hh);

        },
    });
}
function province(){
	var province_id=$('.pr option:selected').val();
	// alert(province_id);return false;
    $.ajax({
        url: "{:U('Operate/city_list')}",
        type: "post",
        data: {province_id:province_id},
        dataType:"json",
        success: function (data) {
                var hh='';
                $.each(data.data.city,function(k,v){
                 hh +='<option value='+v.city_id+'>'+v.name+'</option>';
                });
            	$('.ci').html(hh);
            	var aa='';
                $.each(data.data.area,function(k,v){
                 aa +='<option value='+v.area_id+'>'+v.name+'</option>';
                });
            	$('.ar').html(aa);
        },
    });
}
function city(){
	var city_id=$('.ci option:selected').val();
	// alert(province_id);return false;
    $.ajax({
        url: "{:U('Operate/area_list')}",
        type: "post",
        data: {city_id:city_id},
        dataType:"json",
        success: function (data) {
            	var aa='';
                $.each(data.data,function(k,v){
                 aa +='<option value='+v.area_id+'>'+v.name+'</option>';
                });
            	$('.ar').html(aa);
        },
    });
}
$("#add").click(function(){
	var hh='';
	hh+='<div style="margin-bottom: 10px;" class="bz">';
	hh+='<div class="xbn-r" style="width: 132px;margin-right: 10px;">';
	hh+='<select name="zhou[]">';
	hh+='<option value="周一">周一</option><option value="周二">周二</option><option value="周三">周三</option><option value="周四">周四</option><option value="周五">周五</option><option value="周六">周六</option><option value="周日">周日</option>';
	hh+='</select>';
	hh+='</div>';
	hh+='<div class="xbn-r" style="width: 300px;margin-right: 10px;">';
	hh+='<input type="text" placeholder="请填写时间段，如“9:00-12:00”" name="sj[]">';
	hh+='</div>';
	hh+='<div class="xbn-ls">';
	hh+='<img src="__PUBLIC__/Home/images/icon_scsj.png"/>';
	hh+='</div>';
	hh+='<div class="divclear"></div>';
	hh+='</div>';
	$('.kc').append(hh);
})
$("body").on('click','.xbn-ls',function(){
	$(this).parent('.bz').remove();

})

$("#tdd").click(function(){
	// alert('123');return false;
	$.ajax({
		url: "{:U('Operate/teach_list')}",
        type: "post",
        data: {},
        dataType:"json",
        success: function (data) {
        	// console.log(data);return false;
		var hh='';
		hh+='<div class="xb-nr" style="width: 100%;" class="bzb">';
		hh+='<div class="xbn-zd">选择老师：</div>';
		hh+='<div class="xbn-r" style="width: 300px;margin-right: 10px;">';
		hh+='<select name="teach_id[]">';
	    $.each(data.data,function(k,v){
	     hh +='<option value='+v.id+'>'+v.username+'/'+v.mobile+'</option>';
	    });
		hh+='</select>';
		hh+='</div>';
		hh+='<div class="xbn-ls nn">';
		hh+='<img src="__PUBLIC__/Home/images/icon_scsj.png" />';
		hh+='</div>';
		hh+='</div>';
		$('.tc').append(hh);
		}
	})
	// var teach="{$teach}";
	// console.log(teach);return false;

})
$("body").on('click','.nn',function(){
	$(this).parent().remove();

})
$("#mdd").click(function(){
	var hh='';
	hh+='<div class="pp">';
	hh+='<ul style="margin-bottom: 20px;border-bottom: 1px dashed #ccc;padding-bottom: 10px;width: 800px;" id="uu">';
	hh+='<li style="margin-bottom: 10px;" >';
	hh+='<div class="xbn-r" style="width: 300px;margin-right: 10px;">';
	hh+='<input type="text" placeholder="请输入章节标题" name="head_word[]">';
	hh+='</div>';
	hh+='<div class="xbn-ls" id="del">';
	hh+='<img src="__PUBLIC__/Home/images/icon_scsj.png" />';
	hh+='</div>';
	hh+='<div class="divclear"></div>';
	hh+='</li>';
	hh+='<li style="margin-bottom: 10px;">';
	hh+='<div class="xbn-r" style="width: 240px;margin-right: 10px;">';
	hh+='<input type="text" placeholder="请输入子节标题" name="subsection_title[]">';
	hh+='</div>';
	hh+='<div class="xbn-ls" id="c_title">';
	hh+='<img src="__PUBLIC__/Home/images/icon_tjls.png" />';
	hh+='</div>';
	hh+='<div class="divclear"></div>';
	hh+='</li>';
	hh+='<li style="margin-bottom: 10px;" >';
	hh+='<div class="xbn-r" style="width: 240px;margin-right: 10px;">';
	hh+='<input type="text" placeholder="请输入子节标题" name="subsection_title[]">';
	hh+='</div>';
	hh+='<div class="xbn-ls" id="c_t">';
	hh+='<img src="__PUBLIC__/Home/images/icon_scsj.png" />';
	hh+='</div>';
	hh+='<div class="divclear"></div>';
	hh+='</li>';
	hh+='</ul>';
	hh+='</div>';
	$('.catalog').append(hh);
})
$("body").on('click','#c_title',function(){
	var hh='';
	hh+='<li style="margin-bottom: 10px;" >';
	hh+='<div class="xbn-r" style="width: 240px;margin-right: 10px;">';
	hh+='<input type="text" placeholder="请输入子节标题" name="subsection_title[]">';
	hh+='</div>';
	hh+='<div class="xbn-ls" id="c_t">';
	hh+='<img src="__PUBLIC__/Home/images/icon_scsj.png" />';
	hh+='</div>';
	hh+='<div class="divclear"></div>';
	hh+='</li>';
	$(this).parent().parent().append(hh);
})
$("body").on('click','#del',function(){
	$(this).parent().parent().remove();
})
$("body").on('click','#c_t',function(){
	$(this).parent().remove();
})
$('.xb-btn').click(function(){
	// var lis = document.getElementById('uu').getElementsByTagName('li').length;
	// var lis = $("#uu").length;
	// $("input[name='li']").val(lis);
	var bb=[];
	$('div ul').each(function(){
		var h=$(this).find('li').length;
		var j=h-1;
		bb.push(j);
		
	})
	$("input[name='li']").val(bb);
})
</script>